<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation :scroll-into-view="scrollInto">
		    <view class="pagecontrol-top-title">
		        <view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index">
		            <view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">{{ items }}</view>
		            <view class="pagecontrol-bottom-line" :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'"></view>
		            <view class="grid-dot">
		            	<uni-badge text="1"/>
		            </view>
					<!-- <view v-if="item.badge" class="grid-dot">
						<uni-badge :text="item.badge"  type="error" />
					</view> -->
				</view>
		    </view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
		    <swiper-item v-for="(item, index) in itemsArr" :key="index">
		        <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" >
					<view v-if="index==0" style="padding-bottom: 100px;">
					    <!--消息-->
						<view v-for="item in 2" style="padding: 10px;background-color: #ffffff;border-bottom: 1px solid #ededed;">
							<view style="display: flex;justify-content: space-between;">
								<text>【公告】</text>
								<text>xxxxxx事件</text>
								<text>未读</text>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 10px;">
								<text>20180311 18:22:25</text>
								<text>admin</text>
							</view>
						</view>
					</view>
					<view v-else-if="index==1" style="padding-bottom: 100px;">
					    <!--预警-->
						<view v-for="item in 2" style="padding: 10px;background-color: #ffffff;border-bottom: 1px solid #ededed;">
							<view style="color: #000000;">
								<view style="display: flex;justify-content: space-between;">
									<text>W18032100156</text>
									<text>20170315 21:35:00</text>
								</view>
								<view style="margin-top: 10px;">
									<text>Y8837676【提货环节】</text>
								</view>
								<view style="display: flex;justify-content: space-between;margin-top: 10px;">
									<span>
										<text>【橙色】</text>
										<text style="margin-left: 10px;">停车超时</text>
									</span>
									<text>预警中</text>
								</view>
								<view style="display: flex;justify-content: space-between;margin-top: 10px;">
									<text>P2232334</text>
									<text>粤B3344455</text>
									<text>GPS</text>
								</view>
							</view>
						</view>
					</view>
					<view v-else-if="index==2" style="padding-bottom: 100px;">
					    <!--待办-->
						<view v-for="item in 2" style="padding: 10px;background-color: #ffffff;border-bottom: 1px solid #ededed;">
							<view style="display: flex;justify-content: space-between;">
								<text>【运单】</text>
								<text>Y333444443待发车</text>
								<text>待处理</text>
							</view>
							<view style="margin-top: 10px;font-size: 12px;">
								<text>描述：</text>
								<text>张司机13844442323于20180311 18:22:25装车粤B2234563</text>
							</view>
							<view style="display: flex;justify-content: space-between;margin-top: 10px;">
								<text>20180311 18:22:25</text>
								<text>admin</text>
							</view>
						</view>
					</view>
		        </scroll-view>
		    </swiper-item>
		</swiper>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				itemsArr: ['消息','预警','待办'],
				 tabIndex: 0,
				 scrollH: 700,
				 scrollInto: '',
			}
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight-40;
		        }
		    });
		},
		methods: {
			// 切换选项
			changeTab(index) {
			    if (this.tabIndex === index) {
			        return;
			    }
			    this.tabIndex = index;
			    // 滚动到指定元素
			    this.scrollInto = 'tab' + index;
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title:'正在加载',
				})
				setTimeout(function() {
					uni.hideLoading()
				}, 500);
			    this.changeTab(e.detail.current);
			},
		},
	}
</script>

<style scoped>
.pagecontrol-top-scroll {
    height: 40px;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 1rpx solid #ededed;
	background-color: #f8f8f8;
}

.pagecontrol-top-title {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.pagecontrol-top-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
	position: relative;
}

.pagecontrol-top-normal {
    color: #656565;
    font-size: 16px;
}

.pagecontrol-top-selected {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.pagecontrol-bottom-line {
    width: 33vw;
    height: 3px;
    margin-top: 8px;
    background-color: #bf5f09;
	border-radius: 11px;
}

.pagecontrol-bottom-line-show {
    visibility: visible;
}

.pagecontrol-bottom-line-visibility {
    visibility: hidden;
}

.buttonHover{
	opacity: 0.6;
}
.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
</style>